<template>
  <div class="box">
    <div class="box-header">
      <img class="bgc" :src="detail.picUrl" alt />
      <div class="header-right">
        <div class="titles">
          <span class="tag">专辑</span>
          <span class="name">{{ detail.name }}</span>
        </div>
        <div class="control">
          <div class="playall">
            <div class="all" @click="playall">
              <img src="../../assets/play2.png" alt />
              <span>播放全部</span>
            </div>
            <div class="line"></div>
            <div @click="addall" class="add">+</div>
          </div>
          <div class="next" @click="sc">
            <img src="../../assets/collect.png" alt />
            <span>{{ favorite }}({{ subscribedCount }})</span>
          </div>
          <div class="next">
            <img src="../../assets/share.png" alt />
            <span>分享({{ shareCount }})</span>
          </div>
          <div class="next">
            <img src="../../assets/download.png" alt />
            <span>下载全部</span>
          </div>
        </div>
        <div class="tags">
          歌手：{{ detail.artists && detail.artists[0].name }}
        </div>
        <div class="tags">时间：{{ detail.publishTime | unix2Time }}</div>
      </div>
    </div>

    <div class="box-content">
      <div class="content-header">
        <ul>
          <li @click="changeColor(1)" :class="{ choosed: Name == 'list' }">
            歌曲列表
          </li>
          <li @click="changeColor(2)" :class="{ choosed: Name == 'pl' }">
            评论({{ total }})
          </li>
          <li @click="changeColor(3)" :class="{ choosed: Name == 'sc' }">
            专辑详情
          </li>
        </ul>
      </div>
    </div>
    <Item :his="his" :search="search" :show="result" v-if="Name == 'list'" />
    <!-- 歌曲列表 -->
    <Comment v-if="Name == 'pl'" :zj="true" :songid="$route.params.id" />

    <div v-if="Name == 'sc'">
      <p class="js">专辑介绍</p>
      <p class="des" v-html="des"></p>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import Item from "../playlist/listItem";
import Comment from "../playlist/comment";
import { mapState } from "vuex";
export default {
  data() {
    return {
      Name: "list",
      detail: {},
      his: {},
      name: "",
      search: "",
      favorite: "收藏", //是否收藏
      result: false,
      playalls: [],
      load: "",
      total: "",
      des: "",
      subscribedCount: "",
      shareCount: "",
    };
  },
  components: { Item, Comment },
  mounted() {
    this.load = this.$loading.show();
    this.init(this.$route.params.id);
  },
  computed: {
    ...mapState(["playlist"]),
  },
  methods: {
    changeColor(n) {
      switch (n) {
        case 1:
          this.Name = "list";
          break;
        case 2:
          this.Name = "pl";
          break;
        case 3:
          this.Name = "sc";
          break;
        default:
          this.Name = "list";
          break;
      }
    },
    sc() {
      //收藏
      if (this.favorite == "收藏") {
        this.$store.commit("addzj", {
          id: this.$route.params.id,
          name: this.detail.name,
          img: this.detail.picUrl,
          songname: this.detail.artists[0].name,
          num: this.his.length,
        });
        this.favorite = "已收藏";
      } else {
        this.$alert({
          ok: () => {
            this.$store.commit("delzj", this.$route.params.id);
            this.favorite = "收藏";
          },
        });
      }
    },
    playall() {
      this.listdata();
      if (this.playlist.length) {
        this.$alert({
          title: '"播放全部"将会替换当前的播放列表，是否继续?',
          ok: () => {
            this.$store.commit("playAll", {
              type: "replce",
              list: this.playalls,
            });
          },
        });
      } else {
        this.$store.commit("playAll", { type: "replce", list: this.playalls });
      }
    },
    addall() {
      this.listdata();
      this.$store.commit("playAll", { type: "push", list: this.playalls });
    },
    //格式化歌单数据
    listdata() {
      this.his.map((item) => {
        let playlist = {
          songName: item.name,
          id: item.id,
          name: item.ar[0].name,
          time: Vue.options.filters.durationToTime(item.dt),
        };
        this.playalls.push(playlist);
      });
    },
    //初始化数据
    init(id) {
      this.$api.albumcontent({ id }).then((res) => {
        this.detail = res.album;
        this.his = res.songs;
        this.des = res.album.description;
        this.load.hide();
      });

      this.$api.ynamic({ id }).then((res) => {
        this.subscribedCount = res.subCount;
        this.shareCount = res.shareCount;
        this.total = res.commentCount;
      });
      this.$store.state.zj.find((item) => {
        if (item.id == id) {
          this.favorite = "已收藏";
          return true;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  overflow-y: scroll;
  height: inherit;
  position: relative;
  .box-header {
    padding: 20px 20px 60px 30px;
    width: 100%;
    display: flex;
    .header-right {
      margin-left: 30px;
      .titles {
        margin-top: 6px;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        .tag {
          display: inline-block;
          color: white;
          border: 1px solid #e03f40;
          font-size: 12px;
          padding: 2px 6px;
          border-radius: 4px;
          margin-top: 2px;
          background-color: #c62f2f;
        }
        .name {
          font-size: 22px;
          margin-left: 10px;
          width: 350px;
          display: inline-block;
          opacity: 0.9;
          vertical-align: top;
          line-height: 1.2;
        }
      }
      .control {
        display: flex;
        color: white;
        > div {
          height: 25px;
          margin-right: 10px;
          padding: 2px 10px;
        }
        .playall {
          background-color: #c62f2f; //b12323
          border-radius: 5px;
          font-size: 13px;
          display: flex;
          padding: 0;
          width: 120px;
          .all {
            display: flex;
            flex: 3;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            &:hover {
              background-color: #b12323;
            }
          }
          .line {
            width: 0.5px;
            height: 100%;
            border-right: 0.7px white dotted;
          }
          .add {
            flex: 1;
            text-align: center;
            line-height: 25px;
            border-radius: 5px;
            &:hover {
              background-color: #b12323;
            }
          }
          img {
            width: 15px;
            height: 15px;
            margin-right: 5px;
          }
        }
        .next {
          display: flex;
          color: black;
          justify-content: center;
          align-items: center;
          border: 1px solid #e1e1e2;
          font-size: 13px;
          border-radius: 5px;
          &:hover {
            background-color: #f5f5f7;
          }
          img {
            width: 15px;
            height: 15px;
            margin-right: 5px;
          }
        }
      }
      .tags {
        font-size: 13px;
        margin-top: 20px;
        margin-bottom: 10px;
        span {
          color: #0c73c2;
          padding: 5px;
        }
      }
    }
    .bgc {
      height: 200px;
      vertical-align: top;
    }
  }
  .box-content {
    height: 28px;
    padding: 0 30px;
    border-bottom: 1px solid #e1e1e2;
    .content-header {
      height: inherit;
      .choosed {
        border-bottom: 5px solid rgb(198, 47, 47);
        color: rgb(198, 47, 47);
      }
      ul {
        list-style-type: none;
        float: left;
        display: flex;
        li {
          padding-bottom: 3px;
          font-size: 15px;
          margin-left: 20px;
          margin-right: 40px;
        }
      }
    }
  }
  .js {
    font-size: 15px;
    font-weight: bold;
    margin: 20px 0 10px 20px;
  }
  .des {
    font-size: 14px;
    color: #666;
    margin-left: 30px;
    white-space: pre;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }
}
</style>
